<template>
  <el-form style="position: relative" ref="eform" :rules="rules" :model="dataModel" label-width="80px">
    <!-- <div class="modify-status">{{ isNew ? '新增' : '修改' }}</div> -->
    <template v-for="group in formConfig.groups">
      <x2-block-title :key="group.groupName">{{ group.groupName }}</x2-block-title>
      <template v-for="rowItem in group.fields">
        <el-form-item :label="rowItem.label" :key="rowItem.id" :prop="rowItem.model">
          <template v-if="rowItem.type == 'input'">
            <el-input placeholder="请输入" :disabled="rowItem.disabled && rowItem.disabled == 'Y'" v-model="dataModel[rowItem.model]" />
          </template>
          <template v-else-if="rowItem.type == 'datepicker'">
            <el-date-picker v-model="dataModel[rowItem.model]" type="date" placeholder="选择日期" />
          </template>
          <template v-else-if="rowItem.type == 'select'">
            <el-select v-model="dataModel[rowItem.model]" placeholder="请选择">
              <template v-if="rowItem.opt">
                <el-option v-for="item in rowItem.opt" :key="item.value" :label="item.label" :value="item.value" />
              </template>
              <template v-else>
                <el-option v-for="item in asyncOpt[rowItem.model]" :key="item.value" :label="item.label" :value="item.value" />
              </template>
            </el-select>
          </template>
          <template v-else-if="rowItem.type == 'switch'">
            <el-switch v-model="dataModel[rowItem.model]" :active-value="rowItem.opt.activeValue" :inactive-value="rowItem.opt.inactiveValue" />
          </template>
          <template v-else-if="rowItem.type == 'extendSelect'">
            <div style="width: 100%; display: flex; align-items: center">
              <el-select size="mini" disabled v-model="dataModel[rowItem.model]" style="flex: 1; margin-right: 8px">
                <el-option :key="editStyle[rowItem.model].value" :label="editStyle[rowItem.model].label" :value="editStyle[rowItem.model].value" />
              </el-select>
              <el-button
                @click="$emit('handleExtendSelect', rowItem.dialogCaller, rowItem.model, (m, item) => extendSelectSubmit(m, item))"
                type="primary"
                >选择</el-button
              >
            </div>
          </template>
        </el-form-item>
      </template>
    </template>
  </el-form>
</template>
<script>
import ld from 'lodash'
function buildOpts(config) {
  const { groups } = config
  let rules = {}
  let editStyle = {}
  let asyncOpt = {}
  for (let group of groups) {
    for (let field of group.fields) {
      if (field.rules) rules[field.model] = field.rules
      if (field.type == 'extendSelect') editStyle[field.model] = { value: '', label: '' }
      if (field.type == 'select' && field.isAsyncOpt) asyncOpt[field.model] = []
    }
  }
  return { rules, editStyle, asyncOpt }
}

export default {
  name: 'X2Form',
  props: {
    formConfig: {
      type: Object,
      default: () => {},
    },
    isNew: {
      type: Boolean,
      default: true,
    },
    // margin: {
    //   type: String,
    //   default: '',
    // },
  },
  data() {
    return {
      dataModel: {},
      initModel: {},
      rules: {},
      editStyle: {},
      asyncOpt: {},
    }
  },
  created() {
    // console.debug(this.formConfig)
    const { rules, editStyle, asyncOpt } = buildOpts(this.formConfig)
    this.editStyle = editStyle
    this.asyncOpt = asyncOpt
    this.rules = rules
  },
  methods: {
    _set_asyncOpt(m, item) {
      this.asyncOpt[m] = item
    },
    extendSelectSubmit(m, item) {
      this.updateEditStyle(m, item)
      this.dataModel[m] = item.value
    },
    updateEditStyle(m, item) {
      this.editStyle[m] = item
    },
    init(data) {
      this.initModel = { ...data }
      this.dataModel = { ...data }
      // reloadEditStyle
    },
    async getData() {
      try {
        const res = await this.$refs.eform.validate()
        // console.log('getData', this.dataModel)
        return this.dataModel
      } catch (e) {
        return false
      }
    },
    isModify() {
      return !ld.isEqual(this.initModel, this.dataModel)
    },
    async submit() {
      try {
        const formData = await this.getData()
        if (!formData) return false
        let data = null
        const { tableName } = this.formConfig
        if (this.isNew) {
          data = [{ tableName, action: 'insert', dataList: [formData] }]
        } else {
          if (!this.isModify()) {
            // this.$message.info('内容未更改,无需提交！')
            return false
          }
          data = [{ tableName, action: 'update', dataList: [this.dataModel] }]
        }
        const res = await this.$request({
          url: '/lowcode/commonUpdate',
          method: 'post',
          data,
        })
        this.initModel = { ...this.dataModel }
        this.$message.success('数据已提交！')

        return true
      } catch (e) {
        console.log('xform > submit > err', e)
        return false
      }
    },
  },
}
</script>

<style lang="scss" scope>
@import '~@/styles/variables.scss';
.x2-opt {
  display: flex;
  align-items: center;
}
.x2-opt-label {
  font-size: $h3;
  margin-right: 8px;
}
.x2-opt + .x2-opt {
  margin-left: 8px;
}
.modify-status {
  position: absolute;
  right: 10px;
  top: 4px;
  z-index: 99;
  font-size: 12px;
  color: #666;
}
::v-deep .el-select .el-select-dropdown .el-scrollbar {
  padding-bottom: 15px !important;
}
</style>
